<template>
  <view class="bgColor">
    <view class="message">
      <image 
        :src="item" 
        mode="aspectFit" 
        @tap="onTapImage(item)" 
        class="pic">
      </image>
      <view class="text-container">
        <text class="text top-text">111</text>
        <view class="main-text-row">
          <text class="text main-text">微聊号：adaasdadd</text>
          <image 
            src="../../static/wx/t05.png" 
            mode="aspectFit" 
            class="qr-icon">
          </image>
        </view>
      </view>
    </view>

    <!-- 服务功能列表 -->
    <tool-list-wx :list="fuwu" @itemClick="handleItemClick"></tool-list-wx>

    <!-- 收藏功能列表 -->
    <tool-list-wx :list="shoucang" @itemClick="handleItemClick"></tool-list-wx>

    <!-- 设置功能列表 -->
    <tool-list-wx :list="shezhi" @itemClick="handleItemClick"></tool-list-wx>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: "../../static/wx/111c.png",  // 图片路径
      fuwu: [
        {
          title: '服务(未开通)',
          path: '',  // 未开通功能为空路径
          icon: '../../static/wx/t06.png',
          else: []
        }
      ],
      shoucang: [
        {
          title: '收藏',
          path: '/wx/favorites/index',  // 跳转到收藏页面
          icon: '../../static/wx/t07.png',
          else: []
        },
        {
          title: '朋友圈',
          path: '',  // 未开通功能
          icon: '../../static/wx/t01.png',
          else: []
        },
        {
          title: '卡包(未开通)',
          path: '',
          icon: '../../static/wx/t10.png',
          else: []
        },
        {
          title: '表情(未开通)',
          path: '',
          icon: '../../static/wx/t09.png',
          else: []
        }
      ],
      shezhi: [
        {
          title: '设置',
          path: '/wx/system/index',  // 假设设置页面路径
          icon: '../../static/wx/t04.png',
          else: []
        }
      ]
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  methods: {
    // 图片预览功能
    onTapImage(item) {
      if (!item) return;
      uni.previewImage({
        current: item,  // 当前显示图片的http链接
        urls: [item]    // 需要预览的图片http链接列表
      });
    },

    // 点击处理函数
    handleItemClick(item) {
      if (!item.path) {
        // 如果路径为空，提示功能未开通
        uni.showToast({
          title: '该功能暂未开通',
          icon: 'none'
        });
      } else {
        // 否则跳转到相应页面
        uni.navigateTo({
          url: item.path
        });
      }
    }
  }
};
</script>

<style scoped>
	/* #ifdef APP-PLUS */
	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ededed;
		overflow: auto;
	}

	/* #endif */
	/* #ifdef H5 */
	page {
		background: #ededed;
	}

	/* #endif */
	.message {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 45rpx 55rpx;
	}

	.pic {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}

	.text-container {
		display: flex;
		flex-direction: column;
	}

	.top-text {
		margin-bottom: 10rpx;
		font-size: 60rpx;
		font-weight: bold;
	}

	.main-text-row {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		/* Space above the row */
	}

	.main-text {
		font-size: 44rpx;
		color: #bcbcbc;
	}

	.qr-icon {
		width: 60rpx;
		height: 60rpx;
		margin-left: 10rpx;
		/* Space between text and QR code */
	}

	.text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
